<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /* 1.确定事件 -- 表单提交事件
            给表单添加表单提交事件
            <form onsubmit="return checkForm()"></form>
           2.编写事件对应的函数  提供对应的函数
            function checkForm(){

            }
        */
        function checkForm(){
            //a.获取用户名和密码的值
            let username = document.getElementById("username").value;
            let password = document.getElementById("password").value;
            alert(username+" : "+password);
            //b.校验用户名和密码的值
            // 定义一个开关
            let flag = true;
            //编写正则表达式
            let zz = /^[a-zA-Z0-9_-]{3,12}$/;
            // 校验用户名
            if(zz.test(username)){
                // 校验通过 在输入框后显示  ✔
                let userMsgObj = document.getElementById("usernameMsg");
                userMsgObj.innerHTML = "<font color='green'>✔</font>";
            }else{
                let userMsgObj = document.getElementById("usernameMsg");
                userMsgObj.innerHTML = "<font color='red'>×用户名不合法</font>";
                flag = false;
            }
            // 校验密码
            if(zz.test(password)){
                // 校验通过 在输入框后显示  ✔
                let pwdMsgObj = document.getElementById("passwordMsg");
                pwdMsgObj.innerHTML = "<font color='green'>✔</font>";
            }else{
                let pwdMsgObj = document.getElementById("passwordMsg");
                pwdMsgObj.innerHTML = "<font color='red'>×密码不合法</font>";
                flag = false;
            }
            return flag;
        }
    </script>
</head>
<body>
    <!-- 给表单绑定表单提交事件 -->
    <form action="https://www.baidu.com" onsubmit="return checkForm()">
        用户名: <input type="text" name="username" id="username" />
        <span id="usernameMsg"></span>
        <br>
        密码: <input type="password" name="password" id="password"/>
        <span id="passwordMsg"></span>
        <br>
        <input type="submit" value="提交">
    </form>
</body>
</html>